<template>
  <div class="container">
    <div class="main">
      <div class="title">節點套餐</div>
      <div class="package">
        <div
          class="package-item"
          @click="packageIndex = 0"
          :class="{ active: packageIndex == 0 }"
        >
          <div class="name">大節點</div>
          <div class="price">
            5000.00
            <div class="sub">USDT</div>
          </div>
          <div class="buy">購買</div>
        </div>
        <div
          class="package-item"
          @click="packageIndex = 1"
          :class="{ active: packageIndex == 1 }"
        >
          <div class="name">小節點</div>
          <div class="price">
            2000.00
            <div class="sub">USDT</div>
          </div>
          <div class="buy">購買</div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-title">節點權益</div>
        <div class="panel-content">
          <div class="panel-item">
            <svg-icon icon-class="star" class="icon" />全網分紅0%
          </div>
          <div class="panel-item">
            <svg-icon
              icon-class="star"
              class="icon"
            />會員中心直接充值賦予W3權益
          </div>
          <div class="panel-item">
            <svg-icon icon-class="star" class="icon" />贈送價值200USDT的wone
            token
          </div>
        </div>
      </div>
    </div>
    <button-max text="確認" />
  </div>
</template>

<script>
import buttonMax from "@/components/button/max";
export default {
  components: { buttonMax },
  data() {
    return {
      packageIndex: 1,
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
